<template>
  <div class="contract-caption-bgc">
    <div class="contract-caption-basic contract-w100">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" @click="dialogFormVisible = true" size="mini">新建议题</el-button>
        </el-form-item>
        <el-form-item label="议题名称">
          <el-input placeholder="请输入议题名称" size="mini" style="width:120px;"></el-input>
        </el-form-item>
        <el-form-item label="发起部门">
          <el-input placeholder="请输入发起部门" size="mini" style="width:80px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="mini">搜索</el-button>
        </el-form-item>
        <el-form-item label="">
          <div class="block">
            <span class="demonstration">创建时间</span>
            <el-time-picker size="mini" is-range v-model="value4" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" placeholder="选择时间范围">
            </el-time-picker>
          </div>
        </el-form-item>


        <el-form-item label="上会形式">
          <el-select placeholder="请选择上会形式" size="mini" v-model="value" filterable allow-create default-first-option>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="mini">筛选</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="mini">导出</el-button>
        </el-form-item>
        <div class="dev1_border" />


      </el-form>
      <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="议题名称" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="发起部门" width="120">
        </el-table-column>
        <el-table-column prop="address" label="创建时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="count" label="上会次数" show-overflow-tooltip>

        </el-table-column>
        <el-table-column prop="meetting" label="上会形式" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="show">
              <el-radio v-model="scope.row.radio1" label="线上"></el-radio>
              <el-radio v-model="scope.row.radio1" label="线下"></el-radio>
            </div>
            <div v-if="!show">
              {{scope.row.radio1}}
            </div>
          </template>

        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text">查看</el-button>
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <!-- 新建议题弹窗 -->
    <el-dialog title="详情信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="议题名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-input v-model="form.region" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选项类型">
          <el-radio-group v-model="form.resource">
            <el-radio label="单选"></el-radio>
            <el-radio label="多选"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  <!--  -->

</template>

<script>
  export default {
    data() {
      return {
        show:true,
        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],

        dialogFormVisible: false,
        formInline: {
          user: '',
          region: ''
        },
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          resource: ''
        },
        formLabelWidth: '120px',
        options: [{
          value: '选项1',
          label: '上线'
        }, {
          value: '选项2',
          label: '下线'
        }],
        value: '',
        value6: '',
        value7: '',
        tableData3: [{
          date: '**议题',
          name: '信息部，组织部',
          address: '2018-10-19',
          count: '1',
          meetting: '',
          radio1: ''
        }, {
          date: '**议题',
          name: '信息部，组织部',
          address: '2018-10-19',
          count: '1',
          meetting: '',
          radio1: '',
        }, {
          date: '**议题',
          name: '信息部，组织部',
          address: '2018-10-19',
          count: '1',
          meetting: '',
          radio1: '',
        }, {
          date: '**议题',
          name: '信息部，组织部',
          address: '2018-10-19',
          count: '1',
          meetting: '',
          radio1: '',
        }, {
          date: '**议题',
          name: '信息部，组织部',
          address: '2018-10-19',
          count: '1',
          meetting: '',
          radio1: '',
        }, {
          date: '**议题',
          name: '信息部，组织部',
          address: '2018-10-19',
          count: '',
          meetting: '',
          radio1: '',
        }, {
          date: '**议题',
          name: '信息部，组织部',
          address: '2018-10-19',
          count: '',
          meetting: '',
          radio1: '',
        }],
        multipleSelection: []
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleDelete(index, row) {
        console.log(index, row);
      },

    }
  }

</script>

<style scoped>
  .bgstyle {
    height: 98%;
    padding: 0px 0px 0px 0px;
  }

</style>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
